<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template>
  <div class="app-container">
    <div class="mx-auto">
      <div class="search-bar">
        <!-- 搜索 -->
        <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="90px">
          <el-form-item label="操作模块" prop="title">
            <el-input
              v-noSpace
              v-model="queryParams.title"
              placeholder="请输入操作模块"
              clearable
              @keyup.enter="handleSearch"
              class="!w-[192px]"
            />
          </el-form-item>

          <el-form-item label="操作状态" prop="status">
            <el-select
              v-model="queryParams.status"
              placeholder="请选择操作状态"
              class="!w-[192px]"
              clearable
              @change="handleSearch"
            >
              <el-option
                v-for="item in statusList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="检验时间" prop="createTime">
            <el-date-picker
              v-model="queryParams.createTime"
              type="date"
              placeholder="选择日期"
              value-format="YYYY-MM-DD 00:00:00"
              format="YYYY-MM-DD"
              clearable
              @change="handleSearch"
            />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon="search" @click="getData">搜索</el-button>
            <el-button icon="refresh" @click="handleReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 表格区域 -->
      <el-table v-loading="loading" :data="tabData" border style="width: 100%">
        <el-table-column prop="title" label="操作模块" />
        <el-table-column prop="status" label="状态">
          <template #default="scope">
            <div>
              {{ statusFormat(scope.row.status) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="createName" label="操作用户" />
        <el-table-column prop="operIp" label="ip地址" />
        <el-table-column prop="createTime" label="操作时间" />
      </el-table>
      <!-- 分页 -->
      <div class="flex justify-between items-center mt-4">
        <pagination
          v-if="total > 0"
          v-model:total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getData"
        />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import LogListAPI, { LogListPageQuery, LogListPageVO } from "@/api/system/logList";
// 加载动画
const loading = ref(false);
// 查询参数
const queryParams: LogListPageQuery = reactive({
  pageNum: 1,
  pageSize: 10,
});
// 状态下拉列表
const statusList = ref([
  {
    label: "正常",
    value: 0,
  },
  {
    label: "异常",
    value: 1,
  },
]);
// 状态格式化
const statusFormat = (val: any) => {
  return statusList.value.find((item) => item.value == val)?.label;
};
// 表格数据
const tabData = ref<LogListPageVO[]>();
// 获取列表
const getData = () => {
  loading.value = true;
  LogListAPI.getPage(queryParams)
    .then((data) => {
      console.log(data);
      tabData.value = data?.list;
      total.value = data.total;
      loading.value = false;
    })
    .finally(() => {
      loading.value = false;
    });
};
// 总数据条数
const total = ref(0);
// 查询ref
const queryFormRef = ref(ElForm);
// 重置
const handleReset = () => {
  nextTick(() => {
    queryFormRef.value.resetFields();
    queryParams.pageNum = 1;
    getData();
  });
};
// 查询
const handleSearch = () => {
  queryParams.pageNum = 1;
  getData();
};

onMounted(() => {
  getData();
});
</script>
<style lang="scss" scoped>
@use "@/styles/css/public" as *;

.el-input__wrapper {
  background-color: white;
  border: 1px solid #dcdfe6;
}

.el-select__wrapper {
  background-color: white;
}

.el-date-editor {
  --el-date-editor-width: auto;
}

.el-table {
  --el-table-border-color: #ebeef5;
  --el-table-header-bg-color: #f5f7fa;
}
</style>
